<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="/zzlp/js/angular1.6.0.js"></script>
<script src="/zzlp/js/angular-route.js"></script>
<script src="/zzlp/js/main.js"></script>
<script src="/zzlp/js/controller.js"></script>
<script src="//cdn.bootcss.com/angular-websocket/2.0.1/angular-websocket.js"></script>
<script src="../js/chatController.js"></script>
<script>

    function preview(file) {
        var prevDiv = document.getElementById('preview');
        if (file.files && file.files[0]) {
            var reader = new FileReader();
            reader.onload = function (evt) {
                prevDiv.innerHTML = '<img src="' + evt.target.result + '" />';
            }
            reader.readAsDataURL(file.files[0]);
        }
        else {
            prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
        }
    }

</script>
<head>
    <style type="text/css">
        #preview, .img, img {
            position: absolute;
            width: 200px;
            height: 200px;
            z-index: 1;
        }

        #preview {
            border: 1px solid #000;
        }

        /*a  upload */
        .a-upload {
            padding: 4px 10px;
            height: 200px;
            width: 200px;
            z-index: 2;
            line-height: 20px;
            position: absolute;
            cursor: pointer;
            opacity: 0;
            color: #fafafa;
            background: #fafafa;
            border: 1px solid #fafafa;
            border-radius: 4px;
            overflow: hidden;
            display: inline-block;
            *display: inline;
            *zoom: 1;
            background-image: url(../img/+.png)
        }

        .a-upload input {

            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
            filter: alpha(opacity=0);
            cursor: pointer
        }

        .a-upload:hover {
            color: #444;
            background: #eee;
            border-color: #ccc;
            text-decoration: none
        }


    </style>
</head>
<body>
<div id="preview"><img src="../img/+.png"></div>
<a href="javascript:;" class="a-upload">
    <input type="file" name="" id="" onchange="preview(this)">
</a>
</body>
</html>